import React, {useEffect, useRef, useState} from 'react';
import {Button, Modal, Spin} from "antd";
import { CaretRightOutlined, PauseOutlined, PoweroffOutlined, DeleteOutlined } from '@ant-design/icons';
import styled from "@emotion/styled";

interface LoggerProps {
    data: number;
    visible: boolean;
    onCancel: () => void;
}


const stateArr = [
    '正在链接中',
    '已经链接并且可以通讯',
    '连接正在关闭',
    '连接已关闭或者没有链接成功',
];


export const ExecLogger:React.FC<LoggerProps> = ({data, visible, onCancel}) => {

    const ws = useRef<WebSocket | null>(null);

    const logs = useRef<HTMLDivElement>(null)

    const [spinning, setSpinning] = useState<boolean>(false)

    const [tip, setTip] = useState<string>('正在保存......')

    const [readyState, setReadyState] = useState('正在链接中');

    const startConn = () => {
        ws.current!.onopen = e => {
            if (logs && logs.current) {
                logs.current!.innerHTML = logs.current!.innerHTML + '<br/>' + stateArr[ws.current?.readyState ?? 0]
            }
        }
    }

    const stopConn = () => {
        ws.current?.send("END")
    }


    const clearContent = () => {
        logs.current!.innerHTML = ''
    }

    useEffect(() => {
        if (visible) {
            ws.current = new WebSocket(`ws://localhost:8080/v1/ws?id=${data}`);

            ws.current.onclose = e => {
                if (logs && logs.current) {
                    logs.current!.innerHTML = logs.current!.innerHTML + '<br/>' + stateArr[ws.current?.readyState ?? 0]
                }
            }

            ws.current.onerror = e =>
                setReadyState(stateArr[ws.current?.readyState ?? 0]);

            ws.current.onmessage = e => {
                if (logs && logs.current) {
                    logs.current!.innerHTML = logs.current!.innerHTML + '<br/>' + e.data
                    logs.current!.scrollTop = logs.current!.scrollHeight
                }

            };
        } else {
            ws.current?.close()
        }
    }, [visible])


    return <Container
        style={{top: 40, width: 95 + 'vw'}}
        destroyOnClose
        maskClosable={false}
        visible={visible}
        onOk={onCancel}
        title="读取日志"
        footer={<>
            <Button type="primary" icon={<DeleteOutlined />} onClick={() => clearContent()}/>
            <Button type="primary" icon={<CaretRightOutlined />} onClick={startConn} />
            <Button type="primary" className="button-color-gray" icon={<PauseOutlined />} onClick={stopConn} />
            <Button type="primary" danger onClick={onCancel} icon={<PoweroffOutlined />} />
        </>}
    >
        <Spin tip={tip} spinning={spinning}>
            <div className="text_area" ref={logs} />
        </Spin>
    </Container>
}

const Container = styled(Modal)`
  
  ::-webkit-scrollbar {
    width: 0;
  }
  
  .ant-modal-body {
    padding: 0 !important;
  }
  .text_area {
    background-color: #000000f0;
    color: #def145e0;
    height: 70vh;
    overflow: auto;
    padding: 5px 10px;
    margin-bottom: 0;
    line-height: 16px;
    font-family: monospace;
    ::-webkit-scrollbar {
      width: 0;
    }
  }
`